import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";
export default class App extends Component {
  state = {
    todos: [
      { id: "001", title: "逛街", done: true },
      { id: "002", title: "喝酒", done: false },
      { id: "003", title: "开车", done: true },
    ],
  };

  addTodo = (todoobj) => {
    const { todos } = this.state;
    const newTodos = [todoobj, ...todos];
    this.setState({ todos: newTodos });
  };
  checkTodo = (id, done) => {
    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, done:done };
      } else return todo;
    });
    this.setState({ todos: newTodos });
  };
  deleteTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter(
      (todo) => todo.id !== id
      //把id不为id的item返回
    );
    this.setState({ todos: newTodos });
  };
  checkAllTodo = (allchecked) => {
    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      //  return  todo.done = allchecked;
      return { ...todo, done: allchecked };
    });
    this.setState({ todos: newTodos });
  };
  clearDone = () => {
    const { todos } = this.state;
    const newTodos = todos.filter((todo) => !todo.done);
    this.setState({ todos: newTodos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header add={this.addTodo} />
          <List
            todos={todos}
            checkTodo={this.checkTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            checkAllTodo={this.checkAllTodo}
            clearDone={this.clearDone}
            todos={todos}
          />
        </div>
      </div>
    );
  }
}

//暴露
// export default App
